<template>
    <div class="common-layout">
        <el-container>
            <el-header>
                <div class="buttons-left">
                    <el-button type="primary" :icon="CirclePlus" class="el-button--primary-i"
                        @click="handleAdd">新增</el-button>
                    <el-button type="info" :icon="Upload" @click="handleUpload">导入</el-button>
                    <el-button type="info" :icon="Download" @click="handleDownload(scope, 'file')">导出</el-button>
                    <el-button type="info" :icon="Download" @click="handleDownload(scope, 'template')">下载模板</el-button>
                    <el-button type="info" :icon="Delete" @click="handleDelete()"
                        v-if="multipleSelection.length > 0">删除</el-button>
                </div>
                <div class="buttons-right">
                    <el-button type="primary" link :icon="Sort">排序</el-button>
                    <el-button type="primary" link :icon="RefreshRight" @click="handleRefresh">刷新</el-button>
                </div>
            </el-header>
            <el-main>
                <el-config-provider :locale="zhCn">
                    <el-table ref="multipleTableRef" :data="lowCodeStore.dataList.tableData" style="width: 100%"
                        :height="tableHeight" @selection-change="handleSelectionChange">

                        <el-table-column type="selection" width="55" />

                        <el-table-column v-for="column in tableColumns" :key="column.prop" :property="column.prop"
                            :label="column.label">
                        </el-table-column>
                        <el-table-column label="操作" width="300">
                            <template #default="scope">
                                <el-button link :icon="Edit" @click="handleEdit(scope)">编辑</el-button>
                                <el-button link :icon="Document" @click="handlePreview(scope)">详情</el-button><el-button
                                    link :icon="Delete" @click="handleDeleteOne(scope)">删除</el-button></template>
                        </el-table-column>
                        <template #empty v-if="lowCodeStore.dataList.tableData.length === 0"><el-empty description="无数据"></el-empty></template>
                    </el-table>
                </el-config-provider>
            </el-main>
            <el-footer>
                <el-config-provider :locale="zhCn">
                    <el-pagination v-model:currentPage="lowCodeStore.dataList.tableCurrentPage"
                        v-model:page-size="lowCodeStore.dataList.tablePageSize" :page-sizes="[5, 10, 20, 50]"
                        :small="small" :disabled="disabled" :background="background"
                        layout="total, sizes, prev, pager, next, jumper" :total="lowCodeStore.dataList.tableTotal"
                        @size-change="handleSizeChange" @current-change="handleCurrentChange" />
                </el-config-provider>
            </el-footer>
        </el-container>
    </div>
    <Drawer ref="drawerRef" />
    <DialogOfUploadData ref="dialogOfUploadDataRef" />
</template>

<script setup>
import { ref, reactive, onMounted } from "vue";
import zhCn from "element-plus/es/locale/lang/zh-cn";
import DialogOfUploadData from "./DialogOfUploadData.vue";
import Drawer from "./Drawer.vue";
import {
    Edit,
    CirclePlus,
    Download,
    Upload,
    Document,
    Delete,
    Sort,
    RefreshRight,
} from "@element-plus/icons-vue";
import pinia from "@/store/pinia";
import { useStore } from "@/store/lowCode.js";
const lowCodeStore = useStore(pinia);

const drawerRef = ref(); // Drawer相关
const dialogOfUploadDataRef = ref(); // 数据导入Dialog

/*表格*/
const multipleTableRef = ref();
const multipleSelection = ref([]);
let tableHeight = ref();

const tableColumns = ref([
    { label: '用户名', prop: 'username' },
    { label: '密码', prop: 'password' },
    { label: '描述', prop: 'desc' },
]);

const handleSizeChange = (val) => {
    lowCodeStore.dataList.tablePageSize = val;
    console.log("handleSizeChange");
    console.log(val);
    //   fetchTemplateData(
    //     mapStore.templateTableCurrentPage,
    //     mapStore.templateTablePageSize
    //   );
};

const handleCurrentChange = (val) => {
    lowCodeStore.dataList.tableCurrentPage = val;
    console.log("handleCurrentChange");
    console.log(val);
    //   fetchTemplateData(
    //     mapStore.templateTableCurrentPage,
    //     mapStore.templateTablePageSize
    //   );
};

const handleSelectionChange = (val) => {
    multipleSelection.value = val;
    console.log("multipleSelection");
    console.log(multipleSelection.value);
};

const handleAdd = () => {
    drawerRef.value.visible = true;
    drawerRef.value.drawerName = "新增";
};

const handleUpload = () => {
    dialogOfUploadDataRef.value.visible = true;
};

const handleDownload = (scope, type) => {
    const iframe = document.createElement("iframe");
    iframe.style.display = "none";
    iframe.style.height = 0;

    ElMessage("开始下载.");

    if (type === "template") {
        iframe.src = `http://192.168.0.104:8081/WordTool/word/template/download?tmCode=${scope.row.code}`;
        document.body.appendChild(iframe);
    } else if (type === "file") {
        generateWordData(scope.row.code).then((data) => {
            if (data) {
                iframe.src = `http://192.168.0.104:8081/WordTool/word/generate/download?generateInfoId=${data}`;
                document.body.appendChild(iframe);
            }
        });
    }

    setTimeout(function () {
        iframe.remove();
    }, 5 * 60 * 1000);
};

const handleDelete = () => {
    console.log("multipleSelection");
    console.log(multipleSelection.value);
    ElMessageBox.confirm(
        '确认删除选择的数据?',
        '确认',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            ElMessage({
                type: 'success',
                message: '删除成功',
            })
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '删除已取消',
            })
        })
};

const handleRefresh = () => {
    console.log("刷新数据.")
}

const handleEdit = scope => {
    drawerRef.value.visible = true;
    drawerRef.value.drawerName = "编辑";
    for (let key in scope.row) {
        if (scope.row.hasOwnProperty(key)) {
            drawerRef.value.ruleForm[key] = scope.row[key];
        }
    }
}

const handlePreview = scope => {
    drawerRef.value.visible = true;
    drawerRef.value.drawerName = "详情";
    for (let key in scope.row) {
        if (scope.row.hasOwnProperty(key)) {
            drawerRef.value.ruleForm[key] = scope.row[key];
        }
    }
}

const handleDeleteOne = (scope) => {
    console.log("scope");
    console.log(scope.row.username);
    ElMessageBox.confirm(
        '确认删除该数据?',
        '确认',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            ElMessage({
                type: 'success',
                message: '删除成功',
            })
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '删除已取消',
            })
        })
}

onMounted(() => {
    tableHeight.value = window.innerHeight - 200;

    window.onresize = function () {
        tableHeight.value = window.innerHeight - 200;
    };
});
</script>

<style lang="less" scoped>
.el-header {
    height: 50px;
    margin: 0;
    padding-top: 0;
    padding-bottom: 0;
}

.buttons-left {
    height: 50px;
    width: 60%;
    float: left;
    overflow: hidden;
}

.buttons-right {
    height: 50px;
    width: 30%;
    float: right;
    text-align: right;
}

.el-main {
    height: calc(100vh - 200px) !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.el-footer {
    height: 40px;
    padding-top: 15px !important;
}
</style>
